<template>
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="推送组名称" prop="groupName">
            <el-input v-model="form.groupName" placeholder="请输入推送组名称" />
          </el-form-item>
          <el-form-item label="推送组简介" prop="groupIntro">
            <el-input v-model="form.groupIntro" placeholder="请输入推送组简介" />
          </el-form-item>
        </el-form>
        <template>
          <el-transfer
            v-model="selectList"
            filterable
            :filter-method="filterMethod"
            filter-placeholder="手机号"
            :data="userList"
          />
        </template>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
    </div>
</template>
<script>
import { listGroup, getGroup, delGroup, addGroup, updateGroup } from "@/api/push/group";

export default {
  name: "Group",
  data() {
    const generateData = _ => {
      const data = [];
      const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
      const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index]
        });
      });
      return data;
    };
    return {
        form:{},
        rules:{},
      userList:[],
      selectList:[],
      data: generateData(),
      value: [],
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    submitForm(){

    }
  }
  
};
</script>